<!DOCTYPE>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>       
        <link href="assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="font/css/font-awesome.min.css" />
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
        <script src="js/date.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>   
        <script src="js/lrtk.js" type="text/javascript" ></script>		
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="assets/layer/layer.js" type="text/javascript" ></script>
        <script src="assets/laydate/laydate.js"></script>
        <script src="assets/dist/echarts.js"></script>
      
<title>会员等级</title>
</head>

<body>
<div class="grading_style"> 
<div id="category">
    <div id="scrollsidebar" class="left_Treeview">
    <div class="show_btn" id="rightArrow"><span></span></div>
    <div class="widget-box side_content" >
    <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
     <div class="side_list">
      <div class="widget-header header-color-green2">
          <h4 class="lighter smaller">会员等级</h4>
      </div>
      <div class="widget-body">
         <ul class="b_P_Sort_list">
             <li><i class="orange  fa fa-user-secret"></i><a href="#" onclick="searchAllUser()">全部(<span id="allUser"></span>)</a></li>
             <li><i class="fa fa-diamond pink "></i> <a href="#" onclick="generalUser()">普通会员(<span id="notMoneyUser" ></span>)</a></li>
             <li> <i class="fa fa-diamond pink "></i> <a href="#" onclick="vip()">充值会员(<span id="moneyUser" ></span>)</a> </li>
<!--             <li> <i class="fa fa-diamond pink "></i> <a href="#">铜牌会员(3456)</a></li>-->
<!--             <li><i class="fa fa-diamond pink "></i> <a href="#">银牌会员(4332)</a></li>-->
<!--             <li><i class="fa fa-diamond pink "></i> <a href="#">金牌会员(1332)</a></li>-->
<!--             <li> <i class="fa fa-diamond grey"></i> <a href="#">钻石会员(4543)</a></li>-->
<!--             <li> <i class="fa fa-diamond red"></i> <a href="#">红钻会员(343)</a></li>-->
<!--             <li> <i class="fa fa-diamond blue"></i> <a href="#">蓝钻会员(2343)</a></li>-->
<!--             <li> <i class="fa fa-diamond grey"></i> <a href="#">黑钻2(53)</a></li>-->
            </ul>
  </div>
  </div>
  </div>  
  </div>
  <!--右侧样式-->
   <div class="page_right_style right_grading">
   <div class="Statistics_style" id="Statistic_pie">
     <div class="type_title">等级统计 
     <span class="top_show_btn Statistic_btn">显示</span> 
     <span class="Statistic_title Statistic_btn"><a title="隐藏" class="top_close_btn">隐藏</a></span>
     </div> 
      <div id="Statistics" class="Statistics"></div> 
      </div>
      <!--列表样式-->
      <div class="grading_list">
       <div class="type_title">全部会员等级列表</div>
         <div class="table_menu_list">
             <div class="search_style">

                 <ul class="search_content clearfix">
                     <li><label class="l_f">会员名称</label><input name="" type="text"  class="text_add" placeholder="输入会员名称、电话、邮箱"  style=" width:400px"/></li>
                     <li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start" style=" margin-left:10px;"></li>
                     <li style="width:180px;">
                         <button type="button" class="btn_search" id="searchBtn"><i class="icon-search"></i>查询</button>
<!--                         <button type="button" class="btn_search" onclick="searchAllLogging()"><i class="fa fa-search"></i>所有</button>-->
                     </li>
                 </ul>
             </div>
       <table class="table table-striped table-bordered table-hover" id="sample-table">
		<thead>
		 <tr>
<!--				<th width="25"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>-->
				<th width="80">ID</th>
				<th width="100">用户名</th>
				<th width="80">性别</th>
				<th width="120">手机</th>
				<th width="150">邮箱</th>
				
				<th width="180">生日</th>
                <th width="100">等级</th>
                <th width="100">积分</th>
				<th width="160">会员生效时间</th>
				<th width="160">会员结束时间</th>
			</tr>
		</thead>
	<tbody id="sample-table-tbody">
      </tbody>
	</table>
             <div id="pageBox" style="margin-top: 5%">
                 <button id="upPage" onclick="up()" style="margin-left: 42%">上一页</button>
                 <input type="text" id="page" style="width: 35px;text-align: center"/>&emsp;/<input type="text" id="total" style="width: 35px;text-align: center" disabled="disabled"/>
                 <button id="nextPage" onclick="next()">下一页</button>
             </div>
   </div>
      </div>
   </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
    laydate({
        elem: '#start',
        event: 'focus'
    });
$(function() { 
	$("#category").fix({
		float : 'left',
		//minStatue : true,
		skin : 'green',	
		durationTime :false,
		spacingw:20,
		spacingh:240,
		set_scrollsidebar:'.right_grading',
	});
});
$(function() { 
	$("#Statistic_pie").fix({
		float : 'top',
		//minStatue : true,
		skin : 'green',	
		durationTime :false,
		spacingw:0,
		spacingh:0,
		close_btn:'.top_close_btn',
		show_btn:'.top_show_btn',
		side_list:'.Statistics',
		close_btn_width:80,
		side_title:'.Statistic_title',
	});
});
</script>
<script type="text/javascript">
    var pageTotal;  //总页码
    var currentPage = 1;  //当前页码
    var upPage;     //上一页
    var nextPage;    //下一页
    var allUser = 0;  //所有用户
    var notMoneyUser = 0; //普通用户
    var moneyUser = 0;  //充值用户
    var marking = 1;    //标识数字，区别1.全部会员、2.普通会员、3.充值会员
    //显示所有会员
    function searchAllUser(){
        notMoneyUser = 0; //普通用户
        moneyUser = 0;  //充值用户
        $(".text_add").val("");
        $("#start").val("");
        $.ajax({
            url: "http://localhost:8080/SnacksShop/boss.do?type=queryAllUser",
            data: {
                currentPage:currentPage,
                pageSize:10
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success: function (data) {
                var obj = JSON.parse(data);
                if (obj.users.message == '200'){
                    var object = obj.users.object;
                    var datas = object.datas;
                    info(datas);
                    //画图的
                    require.config({
                        paths: {
                            echarts: './assets/dist'
                        }
                    });
                    require(
                        [
                            'echarts',
                            'echarts/theme/macarons',
                            'echarts/chart/pie',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                            'echarts/chart/funnel'
                        ],
                        function (ec,theme) {
                            var myChart = ec.init(document.getElementById('Statistics'),theme);

                            option = {
                                title : {
                                    text: '用户等级统计',
                                    subtext: '实时更新最新等级',
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {

                                    x : 'center',
                                    y : 'bottom',
                                    data:['普通用户','充值用户'
                                        // ,'铜牌用户','银牌用户','金牌用户','钻石用户','蓝钻用户','红钻用户'
                                    ]
                                },
                                toolbox: {
                                    show : true,
                                    feature : {
                                        mark : {show: false},
                                        dataView : {show: false, readOnly: true},
                                        magicType : {
                                            show: true,
                                            type: ['pie', 'funnel'],
                                            option: {
                                                funnel: {
                                                    x: '25%',
                                                    width: '50%',
                                                    funnelAlign: 'left',
                                                    max: 6200
                                                }
                                            }
                                        },
                                        restore : {show: true},
                                        saveAsImage : {show: true}
                                    }
                                },
                                calculable : true,
                                series : [
                                    {
                                        name:'品牌数量',
                                        type:'pie',
                                        radius : '55%',
                                        center: ['50%', '60%'],
                                        data:[
                                            {value:notMoneyUser, name:'普通用户'},
                                            {value:moneyUser , name:'充值用户'},
                                            // {value:1300, name:'铜牌用户'},
                                            // {value:1000, name:'银牌用户'},
                                            // {value:980, name:'金牌用户'},
                                            // {value:850, name:'钻石用户'},
                                            // {value:550, name:'蓝钻用户'},
                                            // {value:220, name:'红钻用户'},

                                        ]
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        }
                    );
                    $("#allUser").text(allUser);
                    $("#notMoneyUser").text(notMoneyUser);
                    $("#moneyUser").text(moneyUser);
                    currentPage = object.currentPage;
                    $("#page").val(currentPage);
                    $("#total").val(object.totalPage);
                    nextPage = object.nextPage;
                    upPage = object.upPage;
                    pageTotal = object.totalPage;
                    btnDisabled(object);
                    marking = 1;
                }else if (obj.users.message == '101'){
                    layer.alert("您还没有店铺哦! \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }else {
                    layer.alert("您店铺没有粉丝! \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }
            },
            error: function (data) {
                console.log("访问服务器失败");
            }
        });
    }
    //显示普通会员
    function generalUser() {
        var url = "http://localhost:8080/SnacksShop/boss.do?type=queryGeneralUser";
        search(url,1);
        marking = 2;
    }
    //显示充值会员
    function vip() {
        var url = "http://localhost:8080/SnacksShop/boss.do?type=queryVipUser";
        search(url,1);
        marking = 3;
    }
    searchAllUser();
    //显示
    function info(datas) {
        var tbody = document.getElementById("sample-table-tbody").childNodes;
        if (tbody != null){
            $("#sample-table-tbody").empty();
        }
        allUser = datas.length;
        for (var i of datas){
            var sex = "";
            var vip = "";
            var startTime = "";
            var endTime = "";
            if (i.user.userStartDate == null){
                vip = "普通会员";
                notMoneyUser += 1;
            }else {
                if (i.user.userEndDate.time > i.user.userStartDate.time && i.user.userEndDate.time > (new Date().getTime())){
                    vip = "充值会员";

                    moneyUser += 1;
                }else {
                    vip = "普通会员";
                    notMoneyUser += 1;
                }
                startTime =  formatDate(i.user.userStartDate.time);
                endTime = formatDate(i.user.userEndDate.time);
            }
            if (i.user.userSex == '1'){
                sex = "男";
            }else {
                sex = "女";
            }
            var time = i.user.userBirthday.time;
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>" + i.user.userID + "</td>"+
                "<td>"+i.user.userName+"</td>"+
                "<td>"+sex+"</td>"+
                "<td>"+ i.user.userPhone +"</td>"+
                "<td>"+ i.user.userMail +"</td>"+
                "<td>"+ new Date(time).toLocaleDateString()+"</td>"+
                "<td>"+ vip +"</td>"+
                "<td>"+ i.user.userPoints +"</td>"+
                "<td>"+ startTime +"</td>"+
                "<td>"+ endTime +"</td>";
            $("#sample-table-tbody").append(tr);
        }
    }
    var pageText = $("#page");
    //数字框的回车
    document.getElementById("page").addEventListener("keyup",function (event) {
        event.preventDefault();
        if (event.keyCode === 13){
            var values = pageText.val();
            if (isNaN(values)){
                layer.alert("不是数字 \r\n",{
                    title: '提示框',
                    icon:0,
                });
                $("#page").val(currentPage);
            }else {
                if (values > pageTotal){
                    $("#page").val(currentPage);
                    layer.alert("没有了 \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }else {
                    var currentPageTemp = $("#page").val();
                    var url = "http://localhost:8080/SnacksShop/boss.do?type=queryAllUser";
                    search(url,currentPageTemp);
                }
            }
        }
    });

    var page = 1;
    function search(url,page) {
        $.ajax({
            url: url,
            type: "post",
            data:{
                currentPage:page,
                pageSize:10
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success:function (data){
                var obj = JSON.parse(data);
                if (obj.users.message == '200'){
                    info(obj.users.object.datas);
                    var object = obj.users.object;
                    currentPage = object.currentPage;
                    $("#page").val(currentPage);
                    $("#total").val(obj.users.object.totalPage);
                    nextPage = object.nextPage;
                    upPage = object.upPage;
                    pageTotal = object.totalPage;
                    btnDisabled(object);
                }else if (obj.users.message == '101'){
                    layer.alert("您还没有店铺哦! \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }else {
                    layer.alert("您店铺没有粉丝! \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }
            },
            error:function (data){

            }
        });
    };


    //判断按钮是否禁用
    function btnDisabled(object) {
        var currentPage = object.currentPage;
        var upPage = object.upPage;
        var nextPage = object.nextPage;
        var upElement = $("#upPage");
        var nextElement = $("#nextPage");
        if (currentPage == upPage){
            upElement.attr("disabled",true);
        }else {
            upElement.attr("disabled",false);
        }
        if (currentPage == nextPage){
            nextElement.attr("disabled",true);
        }else {
            nextElement.attr("disabled",false);
        }
    }
    var searchTextElement = $(".text_add");
    var searchDateElement = $("#start");


    document.getElementById("searchBtn").addEventListener("click",function (){
        var searchText = searchTextElement.val();
        var searchDate = searchDateElement.val();
        if (searchText != "" && searchDate == ""){   //查询名字
            searchByName(currentPage,searchText)
        }else if (searchText == "" && searchDate != ""){   //查询时间
            searchByDate(currentPage,searchDate)
        }else if (searchText != "" && searchDate != ""){    //查询名字和时间
            searchAll(currentPage,searchText,searchDate);
        }else {
            layer.alert("条件为空 \r\n",{
                title: '提示框',
                icon:0,
            });
        }
    });

    //上一页
    function up() {
        var searchText = $(".text_add").val();
        var searchDate = $("#start").val();
        var upPage = parseInt($("#page").val()) - 1;
        if (searchText != "" && searchDate == ""){
            searchByName(upPage,searchText);
        }else if (searchText == "" && searchDate != ""){
            searchByDate(upPage,searchDate);
        }else if (searchText != "" && searchDate != ""){
            searchAll(upPage,searchText,searchDate);
        }else if (searchText == "" && searchDate == ""){
            var url = "";
            if (marking == '1'){
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryAllUsers";
            }else if (marking == '2'){
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryGeneralUser";
            }else {
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryVipUser";
            }
            search(url,upPage);
        }

    }
    //下一页
    function next() {
        var searchText = $(".text_add").val();
        var searchDate = $("#start").val();
        var nextPage = parseInt($("#page").val()) + 1;
        if (searchText != "" && searchDate == ""){
            searchByName(nextPage,searchText);
        }else if (searchText == "" && searchDate != ""){
            searchByDate(nextPage,searchDate);
        }else if (searchText != "" && searchDate != ""){
            searchAll(nextPage,searchText,searchDate);
        }else if (searchText == "" && searchDate == ""){
            var url = "";
            if (marking == '1'){
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryAllUsers";
            }else if (marking == '2'){
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryGeneralUser";
            }else {
                url = "http://localhost:8080/SnacksShop/boss.do?type=queryVipUser";
            }
            search(url,nextPage)
        }

    }

    //名字和时间一起查询
    function searchAll(currentPage,searchText,searchDate) {
        $.ajax({
            url: "http://localhost:8080/SnacksShop/boss.do?type=queryByTextAndTimeUsers",
            data:{
                currentPage:currentPage,
                pageSize:10,
                searchText:searchText,
                searchDate:searchDate
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success:function (data){
                var obj = JSON.parse(data);
                if (obj.users.message == '200') {
                    var object = obj.users.object;
                    $("#page").val(currentPage);
                    $("#total").val(obj.users.object.totalPage);
                    var datas = object.datas;
                    info(datas);
                    btnDisabled(object);
                }else {
                    layer.alert("没有您想要的结果 \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }
            },
            error:function (data){

            }
        });
    }

    //时间查询
    function searchByDate(currentPage,searchDate) {
        console.log("传入的时间:"+currentPage);
        $.ajax({
            url: "http://localhost:8080/SnacksShop/boss.do?type=queryByTimeUsers",
            data:{
                currentPage:currentPage,
                pageSize:10,
                searchDate:searchDate
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success:function (data){
                var obj = JSON.parse(data);
                if (obj.users.message == '200') {
                    var object = obj.users.object;
                    $("#page").val(currentPage);
                    $("#total").val(obj.users.object.totalPage);
                    var datas = object.datas;
                    info(datas);
                    btnDisabled(object);
                }else {
                    layer.alert("没有您想要的结果 \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }
            },
            error:function (data){

            }
        });
    }

    //名字查询
    function searchByName(currentPage,searchText) {
        $.ajax({
            url: "http://localhost:8080/SnacksShop/boss.do?type=queryByTextUsers",
            data:{
                currentPage:currentPage,
                pageSize:10,
                searchText:searchText
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success:function (data){
                var obj = JSON.parse(data);
                if (obj.users.message == '200') {
                    var object = obj.users.object
                    var datas = object.datas;
                    $("#page").val(currentPage);
                    $("#total").val(obj.users.object.totalPage);
                    info(datas);
                    btnDisabled(object);
                }else {
                    layer.alert("没有您想要的结果 \r\n",{
                        title: '提示框',
                        icon:0,
                    });
                }
            },
            error:function (data){

            }
        });
    }





//初始化宽度、高度  
 $(".widget-box").height($(window).height()); 
 $(".page_right_style").width($(window).width()-220);
 //$(".table_menu_list").width($(window).width()-240);
  //当文档窗口发生改变时 触发  
    $(window).resize(function(){
	$(".widget-box").height($(window).height());
	 $(".page_right_style").width($(window).width()-220);
	 //$(".table_menu_list").width($(window).width()-240);
	}) 
</script>
<script type="text/javascript">
$(function($) {
				var oTable1 = $('#sample-table').dataTable( {
				"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,2,3,4,5,6,7,9]}// 制定列不参与排序
		] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			});
</script>